<template>
  <view class="page">
    <view class="page__hd">
      <view class="page__title">slideview</view>
      <view class="page__desc">左滑操作</view>
    </view>
    <view class="page__bd">
      <view class="weui-cells__title">右滑 文字按钮</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-slideview">
          <view class="weui-slideview__left" style="transform:translateX(-207px);">
            <view class="weui-cell">
              <view class="weui-cell__bd">标题文字</view>
              <view class="weui-cell__ft">说明文字</view>
            </view>
          </view>
          <view class="weui-slideview__right" style="width:207px;line-height:56px;">
            <view class="weui-slideview__buttons">
              <view
                class="weui-slideview__btn__wrp weui-slideview__btn-group_default"
                style="transform:translateX(-207px);"
              >
                <view class="weui-slideview__btn">普通</view>
              </view>
              <view
                class="weui-slideview__btn__wrp weui-slideview__btn-group_default"
                style="transform:translateX(-138px);"
              >
                <view class="weui-slideview__btn">普通</view>
              </view>
              <view
                class="weui-slideview__btn__wrp weui-slideview__btn-group_warn"
                style="transform:translateX(-69px);"
              >
                <view class="weui-slideview__btn">警示</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="weui-cells__title">右滑 图标按钮</view>
      <view class="weui-slidecells">
        <view class="weui-slideview weui-slideview_icon">
          <view class="weui-slideview__left" style="transform:translateX(-231px);">
            <view class="weui-slidecell">
              <view class="weui-slidecell__tips">提示文字</view>
            </view>
          </view>
          <view class="weui-slideview__right" style="width:231px;line-height:71px;">
            <view class="weui-slideview__buttons">
              <view class="weui-slideview__btn__wrp" style="transform:translateX(-231px);">
                <view class="weui-slideview__btn">
                  <img class="weui-slideview__btn__icon" src="/static/images/icon_love.svg" />
                </view>
              </view>
              <view class="weui-slideview__btn__wrp" style="transform:translateX(-146px);">
                <view class="weui-slideview__btn">
                  <img class="weui-slideview__btn__icon" src="/static/images/icon_star.svg" />
                </view>
              </view>
              <view class="weui-slideview__btn__wrp" style="transform:translateX(-77px);">
                <view class="weui-slideview__btn">
                  <img class="weui-slideview__btn__icon" src="/static/images/icon_del.svg" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.weui-slidecells{
  margin:8px;
}
.weui-slidecell{
  background-color:#FFFFFF;
  border-radius:8px;
  padding:24px;
  line-height:1.4;
  font-size:17px;
  color:rgba(0,0,0,.9);
  text-align:right;
}
.weui-slidecell__tips{
  color:rgba(0,0,0,.5);
}

</style>
